<template>
  <div class="login-container">
    <h2 class="login-title">登录</h2>
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label for="tenantCode">租户编码</label>
        <input
          type="text"
          id="tenantCode"
          v-model="tenantCode"
          required
          placeholder="请输入租户编码"
        />
      </div>
      <div class="form-group">
        <label for="username">用户名</label>
        <input
          type="text"
          id="username"
          v-model="username"
          required
          placeholder="请输入用户名"
        />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input
          type="password"
          id="password"
          v-model="password"
          required
          placeholder="请输入密码"
        />
      </div>

      <div class="form-group">
        <button type="submit" :disabled="loading">登录</button>
        <p v-if="loading" class="loading">登录中...</p>
        <p v-if="error" class="error">{{ error }}</p>
      </div>
    </form>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { post } from "../utils/api";
import { ElLoading, ElMessage } from "element-plus";

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
});
const emit = defineEmits(["update:modelValue"]);

const router = useRouter();
const tenantCode = ref("");
const username = ref("");
const password = ref("");
const loading = ref(false);
const error = ref("");

const handleLogin = async () => {
  let payload = {};
  payload.tenantCode = tenantCode.value;
  payload.username = username.value;
  payload.password = password.value;
  payload.authType = 1;
  let loading = ElLoading.service({
    lock: true,
    text: "登陆中...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  await post('/login',payload)
    .then((res) => {
      console.log(res);
      if (res.data.code === 0) {
        sessionStorage.setItem("token", res.data.data.token)
        sessionStorage.setItem("fullname", res.data.data.fullname)
        sessionStorage.setItem("appMenus", JSON.stringify(res.data.data.appMenus))
        sessionStorage.setItem("menus", JSON.stringify(res.data.data.menus))
        localStorage.setItem("tenantCode", tenantCode.value)
        emit("update:modelValue", true)
        // console.log(res.data.data.appMenus);
        loading.close();
        window.location.assign("/");
      } else {
        loading.close();
        ElMessage.error(res.data.msg);
      }
    })
    .catch((e) => {
      loading.close();
      ElMessage.error(e.message);
    });
};

onMounted(() => {
  // 自动设置tenantCode
  tenantCode.value = localStorage.getItem("tenantCode");
  let token = sessionStorage.getItem("token");
  if (token) {
    // 如果有token，则自动登录
    router.push("/");
  }
})
</script>

<style scoped>
.login-container {
  max-width: 500px;
  margin: 10px auto;
  padding: 50px 100px;
  /* border: 1px solid #ccc; */
  border-radius: 8px;
  background-color: white;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-group button {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.form-group button:disabled {
  /* background-color: #ccc; */
  cursor: not-allowed;
}

.loading,
.error {
  text-align: center;
  color: red;
  margin-top: 10px;
}
</style>
